<template>
  <div id="app">
    <nav class="home-nav" v-if="$route.meta.homeNav">
      <router-link to="/home">
        <label>
          <i class="iconfont icon-31shouye"></i>
          <span>首页</span>
        </label>
      </router-link>

      <router-link to="/handnote"
        ><label
          ><i class="iconfont icon-w_bijiben"></i> <span>手记</span></label
        ></router-link
      >

      <router-link to="/searchfind"
        ><label
          ><i class="iconfont icon-31sousuo"></i> <span>发现</span></label
        ></router-link
      >
      <!-- <router-link to="/classroom">
        <label>
          <i class="iconfont icon-boshimao1"></i>
          <span>课堂</span>
        </label></router-link
      > -->
      <router-link to="/mypage">
        <label>
          <i class="my iconfont icon-double-circle"></i>
          <span>我的</span>
        </label></router-link
      >
    </nav>
    <router-view />
  </div>
</template>
<script>

export default {
  created(){
    this.$store.commit("createdAttention",{arr:JSON.parse(window.localStorage.getItem('attentionList'))})
  }
}
</script>

<style lang="less">
#app {
  // background-color: #f7f7f7;
  .home-nav {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      color: #bcbcbc;
      text-decoration: none;
      &.router-link-active{
        color: #000;
      }
      label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        i {
          font-size: 25px;
        }
        .my{
          font-size: 24px;
        }
      }
    }
  }
}
</style>
